/* 页面动画组件
 * PageAnimation.jsx
 */

 import React, { Component, PropTypes } from 'react';

import {upCompAttr,upCompSurface,upCompAnimation,upCompEvent} from '../../../actions/h5/ComponentAction';
import {updatePageAttr} from '../../../actions/h5/PageAction';
import {listMusic,listImage,listFile,clearPageIdArr} from '../../../actions/FileHandleAction';
import {upH5Attr} from '../../../actions/h5/H5Action';

import {FONTS,ANIMATIONS} from '../../../utils/H5constants';
import UploadComponent from '../../../components/UploadComponent.jsx';
import {getImageWH} from '../../../utils/H5helper';

 class PageAnimation extends Component{
	constructor(props){
		super(props);
	}

	//设置整个h5页面的属性
	upH5Attribute(name,value){
		this.props.dispatch(upH5Attr(name,value));
	}

	render(){
		return(
			<div className="panel-group">
				<h4 className="ui header">翻页</h4>
				{/*<div className="ui labeled input h5-labeled-input">
				  <div className="ui label">翻页方向</div>
				  <select className="ui dropdown">
				  	<option value="vertical">竖向</option>
					<option value="horizontal">横向</option>
				  </select>
				</div>
				<br/>slide, fade, coverflow or flip*/}
				<div className="input-group">
				  <span className="input-group-addon">翻页效果</span>
				  <select className="form-control input-sm" value={this.props.h5Data.attributes.swiperEffect} onChange={e=>this.upH5Attribute('swiperEffect',e.target.value)}>
				  	<option value="slide">显示稿</option>
				  	<option value="coverflow">卡片</option>
					<option value="fade">淡出</option>
					<option value="flip">翻转</option>
				  </select>
				</div>
				<div className="ui toggle checkbox h5-labeled-input">
				  <input type="checkbox" checked={this.props.h5Data.attributes.loop} onChange={()=>{this.upH5Attribute('loop',!this.props.h5Data.attributes.loop)}}/>
				  <label>循环播放</label>
				</div>
				{/*<div className="ui labeled input h5-labeled-input">
			  		<div className="ui label">翻页时长(秒)</div>
			  		<input style={{width:'50%'}} type="range" step="0.05" defaultValue="0.5" min="0" max="1" />
				</div>*/}
			</div>
		);
	}

}

export default PageAnimation;
